<template>
	<gracePage statusBarBG="#EB5D4B" :headerHeight="0">
		<view slot="gHeader" class="grace-border-b">
			<graceHeader background="#EB5D4B" style="height: 88rpx;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons grace-white icon-arrow-left" @tap="goback"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex" style="text-align: center;color: #FFFFFF;font-size: 30rpx;">{{title}}</view>
					<text v-if="address_id" class="grace-icons icon-remove2" style="margin-right: 20rpx;color: #FFFFFF;font-size: 40rpx;" @tap="deleteAddress"></text>
				</view>
			</graceHeader>
		</view>
		<view slot="gBody" class="grace-body">
			<form @submit="formSubmit" class="grace-form grace-margin-top">
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">姓名</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" :value="name" name="name" placeholder="请填写联系姓名"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">联系电话</text>
					<view class="grace-form-body">
						<input type="number" maxlength="11" class="grace-form-input" :value="phone" name="phone" placeholder="请填写联系电话"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">省/市/区</text>
					<view class="grace-form-body" @tap="openPicker">
						<input type="text" class="grace-form-input" name="area" :value="area" disabled placeholder="请选择省/市/区"></input>
					</view>
				</view>
				<view class="grace-form-item">
					<text class="grace-form-label">详细地址</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" :value="address" name="address" placeholder="请填写详细地址"></input>
					</view>
				</view>
				<view class="grace-form-item grace-flex grace-space-between grace-rows">
					<text class="grace-form-label" style="width: 250rpx;">是否设为默认地址</text>
					<view class="grace-form-body">
						<graceCheckBtn :checked="val" style="margin-left: 390rpx;" name="is_default" @change="checkedChange" :size="36" color="#EE624E"></graceCheckBtn>
					</view>
				</view>
				
				<view style="padding:30rpx 0;">
					<button formType="submit" type="primary" class="grace-button grace-border-radius" style="background-color: #EB5D4B;">提交</button>
				</view>
				<graceAddressPicker :show="graceAddressPickerShow" @confirm="pickerConfirm" @close="closePicker" cancelTColor="关闭"></graceAddressPicker>
			</form>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
import graceAddressPicker from '../../graceUI/components/graceAddressPicker.vue';
import graceHeader from "../../graceUI/components/graceHeader.vue";
import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
var  graceChecker = require("../../graceUI/jsTools/graceChecker.js");
export default {
    data() {
    	return {
				graceAddressPickerShow : false,
				area:'江苏省 南京市 玄武区',
				val:false,
				name:"",
				phone:"",
				address:"",
				address_id:"",
				title:""
			};
    },
		onLoad() {
			uni.getStorage({
				key:"addressData",
				success:(res)=>{
					if(res) {
						let data = JSON.parse(res.data)
						this.setData({
							area:data.province+" "+data.city+" "+data.district,
							val:data.val==1?true:false,
							name:data.name,
							phone:data.phone,
							address:data.address,
							address_id:data.address_id,
							title:"编辑地址"
						})
					}else {
						this.setData({
							title:"新增地址"
						})
					}
				}
			})
		},
		methods:{
			deleteAddress:function() {
				uni.showModal({
					title:"确定要删除吗?",
					success: (e) => {
						if(e.confirm){
							this.gRequest.post('/orders/deleteaddr', {
								member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id,
								address_id:this.address_id
							},"form",{}, res => {
								uni.showToast({ title: "删除成功", icon: "none" });
								uni.navigateBack({})
							});
						}
					}
				});
			},
			checkedChange: function(e) {
				this.val = e[0];
			},
			goback: function() {
				uni.navigateBack({});
			},
			openPicker : function () {
				this.graceAddressPickerShow = true;
			},
			pickerConfirm : function(e){
				this.area = e.names[0]+' '+e.names[1]+' '+e.names[2];
				this.closePicker();
			},
			closePicker : function () {
				this.graceAddressPickerShow = false;
			},
			// 表单提交
			formSubmit : function(e){
				var rule = [
					{ name: "name", checkType: "string", checkRule: "1,10", errorMsg: "联系人应为1-20个字符" },
					{ name: "phone", checkType: "phone", checkRule: "", errorMsg: "请正确填写手机号" },
					{ name: "area", checkType: "string", checkRule: "1,100", errorMsg: "请选择所在地区" },
					{ name: "address", checkType: "string", checkRule: "5,100", errorMsg: "请正确填写详细地址" }
				];
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					if(!this.address_id) {
						this.gRequest.post('/orders/addaddress', {
							member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id,
							province:formData.area.split(" ")[0],
							city:formData.area.split(" ")[0],
							district:formData.area.split(" ")[2],
							is_default:this.val,
							...formData
						},"form",{}, res => {
							uni.showToast({ title: "添加成功", icon: "none" });
							uni.navigateBack({})
						});
					}else {
						this.gRequest.post('/orders/edit_address', {
							member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id,
							province:formData.area.split(" ")[0],
							city:formData.area.split(" ")[0],
							district:formData.area.split(" ")[2],
							is_default:this.val,
							address_id:this.address_id,
							...formData
						},"form",{}, res => {
							uni.showToast({ title: "编辑成功", icon: "none" });
							uni.navigateBack({})
						});
					}
					
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			}
		},
		components:{gracePage, graceAddressPicker,graceHeader,graceCheckBtn}
	}
</script>
<style>
	.grace-body {
		margin-top: 100rpx;
	}
</style>